<template>
	<div class="wrap">
		<el-header>
		<img src="https://store.jzkj.net/Public/Admin/default/images/logo_09.png" id="logo">
				<div class="header-avatar">
					<el-dropdown>
						<span class="el-dropdown-link">
							{{ userInfo.realname }}
							<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>
								<router-link :to="{ name: 'UserCenter' }">个人中心</router-link>
							</el-dropdown-item>
							<el-dropdown-item @click.native="logout">退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</el-header>

	<el-container>
		<el-aside width="200px">
			<SideMenu></SideMenu>
		</el-aside>
		<el-container>
			<el-main>
				<Tabs></Tabs>
				<div style="margin: 0 15px;">
					<router-view />
				</div>
			</el-main>
		</el-container>
	</el-container>
	</div>
</template>

<script>
import SideMenu from "./inc/SideMenu";
import Tabs from "./inc/Tabs";
export default {
    name: "Home",
    components: {
        SideMenu, Tabs
    },
    data() {
        return {
            userInfo: {}
        }
    },
    created() {
        this.userInfo = JSON.parse(localStorage.getItem("user"))
    },
    methods: {
        logout() {
            this.$axios.post("/admin/index/logout").then(res => {
                localStorage.clear()
                sessionStorage.clear()
                this.$store.commit("resetState")
                this.$message.success("退出成功");
                this.$router.push("/login")
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.wrap{
	height: 100%;
	overflow: hidden;
	#logo{
		float: left;
		height: 50px;
		margin: 5px;
	}
}
.el-container {
	padding: 0;
	margin: 0;
	height: 100%;
}

.header-avatar {
	float: right;
	width: 210px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.el-dropdown{
	color: #fff;
}
.el-dropdown-link {
	cursor: pointer;
}

.el-header {
	background-color: #092759;
	// border-bottom:1px solid #fff; 
	color: #fff;
	text-align: center;
	line-height: 60px;
}

.el-aside {
	background-color: #d3dce6;
	color: #fff;
	line-height: 200px;
}

.el-main {
	// color: #fff;
	padding: 0;
	height: calc(100% - 60px);
	overflow: hidden;
	overflow-y: auto;
	// background: #13213e;
}

a {
	text-decoration: none;
}
</style>